<template>
            <div class="top-nav" >
                <div class="top-box">
                    <div><img src="../assets/indexImg/homeLogo.png" alt=""></div>
                    <ul>
                        <li v-for="(item,index) in list" :key="index" @click="isClick(index)">
                            {{item}}
                            <div :class="['nav-box',$store.state.isShow==index?'nav-active':'']"></div>
                        </li>
                    </ul>
                </div>
            </div>
</template>

<script>
    export default {
        name: "topHeade",
        data(){
            return{
              list:['首页','产品','星火实验室','新闻中心','关于我们'],
            }
        },
        methods:{
            isClick(index){
                // console.log(index)
                this.$store.commit('modify',{show:index})
                switch (index) {
                    case 0:
                        this.$router.push('/index')
                        break;
                    case 1:
                        this.$router.push('/product')
                        break;
                    case 2:
                        this.$router.push('/laboratory')
                        break;
                    case 3:
                        this.$router.push('/news')
                        break;
                    case 4:
                        this.$router.push('/about')
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .top-nav{
        height: 75px;
        background: black;
    }
    .top-box {
        overflow: hidden;
        display: flex;
        height: 75px;
        justify-content:space-around;
        align-items: center;
    }
    ul {
        float: right;
        overflow: hidden;
    li {
        float: left;
        padding: 0 40px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: all .5s;
    }
    li:hover{
        color: #71cfff;
    }
    }
    .nav-active {
        background-image: url("../assets/indexImg/nav_bg.png");
    }
    .nav-box {
        position: relative;
        left: -32px;
        top: -5px;
        width: 62px;
        height: 15px;
    }
</style>